<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- Fix for iOS Safari zooming bug -->
		<meta name="viewport"
			content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta charset="utf-8" />
		<!--script src="./pako.js"></script-->
		<!--封装了一个发布订阅模式-->
		<!--script src="./event.js"></script-->
		<!--websocket-->
		<!--script src="./websocket.js"></script-->
		<!-- <script src="./socket.js"></script> -->
		<!--图表库js-->
		<script src="./lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
	</head>
	<style>
		.three-line-legend {
			display: flex;
			align-items: center;
			position: absolute;
			padding: 0 8px;
			font-size: 12px;
			color: '#20262E';
			background-color: rgba(255, 255, 255, 0.23);
			text-align: left;
			z-index: 1000;
			pointer-events: none;
		}
		.three-line-legend > div {
			padding-left: 10px;
		}
		.floating-tooltip-2 {
			/*width: 96px;
			height: 80px;*/
			position: absolute;
			display: none;
			padding: 8px;
			box-sizing: border-box;
			font-size: 12px;
			color: #131722;
			background-color: rgba(255, 255, 255, 1);
			text-align: left;
			z-index: 1000;
			top: 12px;
			left: 12px;
			pointer-events: none;
			border: 1px solid rgba(0, 150, 136, 1);
			border-radius: 2px;
		}

		* {
			padding: 0;
			margin: 0;
		}

		html, body {
			height: 100%;
			background-color: #21212b;
			overflow: hidden;
		}

		/* 这个下面的css是 产品周期按钮的 */

		.header {
			position: relative;
			height: 31vh;
			box-shadow: 0px 4px 2px #fff;
		}

		.times {
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 5px 10px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			    background-color: rgb(50, 50, 55);
		}

		.times span {
			margin-right: 1px;
			/* width: 42px; */
			flex: 1;
			height: 20px;
			flex-shrink: 0;
			line-height: 20px;
			color: rgb(115, 115, 115);
			font-size: 14px;
			text-align: center;
			border-radius: 2px;
		}

		.times span.active {
			color: rgb(59, 126, 255);
		}

		/* 	#tv_chart_container:before {
			content: " ";
			position: fixed;
			bottom: 22%;
			left: 5%;
			z-index: 999;
			width: 9vw;
			height: 9vw;
			background-color: #fff;
		} */
		
		/* 这个下面的css重点关注，和k线图与关 */
		#tv_chart_container {
			width: 100%;
			height: 68vh;
		}

		iframe {
			width: 100%;
			height: 100% !important;

		}

		.pane-legend-line.pane-legend-wrap.main.expand-line {
			padding-right: 5px;
		}

		.detail {
			/* display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between; */
		}
		.detail .left{
			display: flex;
			align-items: center;
			margin: 20px 0;
			justify-content: center;
		}

		.detail .u {
			font-size: 32px;
			color: #26a848;
			font-weight: bold;
		}

		.detail .c {
			font-size: 14px;
			color: #26a848;
			font-weight: bold;
			margin-top: 5px;
			margin-left: 5px;
		}

		.detail .c .change {
			color: #26a848;
		}

		.detail .left {
			padding: 0 0 7px;
		}

		.detail .right {
			width: 100%;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			border-top:1px solid #333;
		}

		.detail .right .i {
			height: 35px;
			display: flex;
			flex-shrink: 0;
			align-items: center;
			color: #828095;
			font-size: 14px;
		}
		.ddd{
			margin: 0px 10px;
		}
		.dddTow{
			color: #26a848;
		}
		.dddThree{
			color: #ff0105;
		}

		.detail .right .flex {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.flexddd{
			width: 50%;
		}
		.detail .right .flexddd:last-child{
			border-left: 1px solid #333;
		}

		.detail .right .i span {
		}

		.detail .right .i label {
			font-size: 14px;
		}

		.detail .t {
			color: #828095;
		}

		.right .t {
			text-align: left;
		}

		@media screen and (max-width: 375px) {
			.detail {
				padding: 0 10px;
			}
		}

		@media screen and (max-width: 340px) {
			.header {
				height: 36vh;
			}

			#tv_chart_container {
				width: 100%;
				height: 61vh;
			}
		}
		.lineBoxss{
			width: 100%;
			height: 7px;
			display: flex;
			align-items: center;
			justify-content: space-between;3
		}
		.lineBoxssLeft{
			width: 50%;
			background-color: #26a848;
			height: 6px;
			border-radius: 100px;
		}
		.lineBoxssright{
			width: 50%;
			background-color: #e45360;
			height: 6px;
			border-radius: 100px;
		}
	</style>

	<body>
		<div class="root">
			<div class="header">
				<div class="detail">
					<div class="left">
						<!-- <div class="t">当前</div> -->
						<div class="u" id="close">0.00</div>
						<div class="c"><p id="cny">0.00 </p>
						<p id="change" class="change">+0.0%</p></div>
					</div>
					<div class="right">
						<div class="flex flexddd">
							<div class="i"><label id="highest" class="t">最高</label><span id="high" class="ddd dddTow" >42400.00</span></div>
							<!-- <div class="i"><label id="opening" class="t">开盘</label><span id="open">0.00</span></div> -->
							<div class="i"><label id="opening" class="t"></label><span id="open" class="dddTow">0.00</span></div>
						</div>
						<!-- <span id="wan">万</span> -->
						<div class="flex flexddd">
							<div class="i"><label id="lowest" class="t">最低</label><span id="low" class="ddd dddThree">0.00</span></div>
							<div class="i"><label id="volume" class="t"></label><span id="amount" class="ddd dddThree">0.00</span></div>
							<!-- <div class="i"><label id="volume" class="t">成交量</label><span id="amount">0.00</span></div> -->
						</div>
					</div>
				</div>
				<div class="lineBoxss">
					<div class="lineBoxssLeft">
						
					</div>
					<div class="lineBoxssright">
						
					</div>
				</div>
				<div class="times" id="interval">
					<!--span data-value="2">Time</span-->
					<span data-value="1" class="active">Time</span>
					<span data-value="5">5M</span>
					<span data-value="15">15M</span>
					<span data-value="30">30M</span>
					<span data-value="60">1H</span>
					<span data-value="1D">1D</span>
					<!--span data-value="1W">1W</span-->
				</div>
			</div>
			<div class="chart">
				<div id="tv_chart_container" style="position: relative;background-color: #21212b;"></div>
			</div>
		</div>
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		<script type="text/javascript">
			function plusReady() {
				var ws = plus.webview.currentWebview();
				ws.overrideUrlLoading({
					mode: 'reject'
				}, function(e) {
					console.log('拦截跳转 url: ' + e.url);
				})
			}
			document.addEventListener('plusready', plusReady, false);

			if (window.UniAppJSBridge) {} else {
				document.addEventListener('UniAppJSBridgeReady', function() {

				});
			}
		</script>
		<!--页面总统js 初始化图表库 绑定点击事件等-->
		<!-- <script src="./index2.js"></script> -->
		<script src="./index4.js"></script>
	

	</body>

</html>
